<template>
  <div class="zip">
    <el-button class="btn" @click="handleDownload" type="primary" size="mini">下载为zip格式</el-button>
    <!-- 表格部分 -->
    <zj-table
      v-loading="loading"
      :columns="columns"
      :data="lists"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :total="total"
      :selectable="false"
      height="auto"
      :pagination="true"
    />
  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      total: 1,
      currentPage: 1,
      pageSize: 10,
      columns: Object.freeze([
        {
          label: '姓名',
          prop: 'name',
          align: 'center'
        },
        {
          label: '性别',
          prop: 'gender',
          align: 'center'
        },
        {
          label: '年龄',
          prop: 'age',
          align: 'center'
        },
        {
          width: 300,
          label: '操作',
          actions: [
            {
              id: 'follow',
              text: '编辑',
              type: 'primary',
            },
            {
              id: 'delete',
              text: '删除',
              type: 'danger',
            }
          ]
        }
      ]),
      lists: [
        {
          id: 1,
          name: '小吕',
          gender: '男',
          age: 22
        },
        {
          id: 2,
          name: '小苏',
          gender: '女',
          age: 18
        }
      ]
    }
  },
  methods:{
    handleDownload() {
      import('@/vendor/Export2Zip').then(zip => {
        const tHeader = ['序号', '姓名', '性别', '年龄']
        const filterVal = ['id', 'name', 'gender', 'age']
        const list = this.lists
        const data = this.formatJson(filterVal, list)
        zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

<style lang="scss" scoped>
  .zip {
    .btn {
      margin-bottom: 20px;
    }
  }
</style>